<template>
  <div>
    <p>{{ person.name }}--{{ person.age }}-{{ person.sex }}</p>
    <button @click="addSexFn">添加性别</button>
    <button @click="delSexFn">删除年龄</button>

    <!-- 遍历数组 -->
    <ul>
      <li v-for="(item, index) in nameArr" :key="index">{{ item }}</li>
    </ul>
    <button @click="editNameFn">修改御弟哥哥</button>
  </div>
</template>

<script>
import Vue from "vue";
import axios from "axios";
export default {
  data() {
    return {
      person: {
        name: "振宁老弟",
        age: 20,
      },
      nameArr: ["御弟哥哥", "悟能", "悟净"],
    };
  },
  methods: {
    addSexFn() {
      //   this.person.sex = "男"; 不行, 不能实现数据的响应式
      //   Vue.set(this.person, "sex", "男");
      this.$set(this.person, "sex", "男");
      console.log(this.person);
    },
    delSexFn() {
      // delete this.person.age;
      //   Vue.delete(this.person, "age");
      this.$delete(this.person, "age");
      console.log(this.person);
    },
    editNameFn() {
      // this.nameArr[0] = "金蝉子";
      // this.$set(this.nameArr, 0, "金蝉子");

      // 语法: arr.splice(起始下标,删除的个数, 新增的元素)
      this.nameArr.splice(0, 1, "三藏");
      console.log(this.nameArr);
    },
  },
  mounted() {
    console.log("this-father", this);
    // console.log(this.addZero(9));

    // 发起数据请求
    axios.get("/api/index/index").then((res) => {
      console.log(res);
    });
  },
};
</script>
<style scoped>
</style>